.role-management-view {
  display: flex;
  height: 100%;
  width: 100%;
  padding: 16px;
  min-width: 1240px;
  
  .base-tree-node-name {
    user-select: none;
  }
}

/* start RoleViewLeftPanel */

.role-view-left-panel {
  background-color: #fff;
  height: 100%;
  width: 230px;
  min-width: 230px;
  margin-right: 12px;
  padding: 12px 12px 0 0;
}

.role-view-right-panel {
  background-color: #fff;
  flex: 1;
  height: 100%;
  width: calc(100vh - 32px - 230px - 12px);
}

.role-view-add-role-button {
  margin: 0 12px 9px 0;
  width: 100%;
}

.role-view-left-panel__top {
  padding-left: 12px;
  overflow: hidden;
}

.role-view-left-panel__bottom {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  height: 40px;
  background: $bg-color-l2;
  box-shadow: 0px -1px 0px 0px #E8E8E8;
  border-radius: 0px 0px 4px 4px;
  padding: 10px 12px;
  line-height: 20px;
  
  &-selected {
    @include backgroundColorPrimaryLight9();
    @include fontColor();
  }
  
}

.role-view-left-panel__top {
  
  height: calc(100% - 40px);
  
  .role-view-left-panel__tree {
    height: 100%;
    overflow: auto;
  }
  
}

.role-view-left-panel__can-create {
  .role-view-left-panel__tree {
    height: calc(100% - 40px);
  }
}

.role-view-left-panel__tree {
  .base-tree-node-name,
  .bc-team-node-wrap {
    @include text-ellipsis();
  }
}

/* end RoleViewLeftPanel */

/* start RoleViewRightPanel */
.role-view-user-table__pagination {
  position: absolute;
  bottom: 0;
  right: 28px;
}

.role-view-right-panel {
  
  .el-tree {
    
    .el-tree-node__children {
      
      .el-tree-node {
        
        .el-tree-node__content {
          padding-left: 18px !important;
        }
        
      }
      
    }
    
  }
  
  .el-tree > .el-tree-node > .el-tree-node__children > .el-tree-node > .el-tree-node__content{
    padding-left: 0 !important;
  }
}
/* end RoleViewRightPanel */

.role-view-user-table {
  .el-table__body-wrapper .is-hidden {
    visibility: visible;
    > * {
      visibility: visible;
    }
  }
}

.role-management-view-trail {
  .role-view-content-view {
    
    .el-tabs__content {
      height: calc(100vh - 50px - 32px - 80px - 36px - 62px);
    }
    
    .role-view-auth-tab {
      .el-tabs__content {
        height: calc(100vh - 50px - 32px - 80px - 36px - 40px - 32px);
      }
    }
    
    .role-view-user-content {
      .role-view-user-table {
        height: calc(100vh - 50px - 298px);
      }
    }
    
  }
  
  .role-view-user-table {
    height: calc(100vh - 50px - 16px - 12px - 24px - 12px - 32px - 8px - 60px);
  }
  
  .role-view-content-stay-allot-view {
    
    .role-view-user-table {
      height: calc(100vh - 50px - 16px - 12px - 24px - 12px - 32px - 8px - 26px);
      
      .el-table  {
        max-height: calc(100% - 50px - 44px);
      }
    }
    
  }
  
  .role-view-content-edit-view__content {
    height: calc(100% - 50px - 72px);
  }
  
  .role-view-content-edit-view__footer {
    bottom: 66px;
  }
  
}